<!--  -->
<template>
  <div>
    <c-title :hide="false" text="权益明细"></c-title>
    <div class="number_List">
      <div class="lis" v-for="(item,index) in member_statistics" :key="index">
        <div class="top">{{item.value}}</div>
        <div class="txt f-14">{{item.title}}</div>
      </div>
    </div>

    <van-tabs v-model="activeName" @change="handleClick" sticky color="var(--themeBaseColor)" background="#f5f5f5">
      <van-tab title="权益明细">

        <div class="list t-l" style="padding-bottom: 1rem;">
          <d-list :loading="(dataList[0] && dataList[0].list.length) > 0 ? dataList[this.activeName].isLoadMore : false" :finished="(dataList[0] && dataList[0].list.length > 0) ? dataList[this.activeName].isLoadMore : false" @load="onLoad" >
            <div class="navlist-radius-block" v-for="(item, index) in dataList[0].list" :key="index">
              <div class="f-bold f-15">{{ item.title }}</div>
              <div class="f-13 color-6E6E79" v-if="item.tip">{{ item.tip.title }}: {{ item.tip.value }}</div>
              <div class="f-12 color-6E6E79" style="mafrgin:0.2rem 0 ;">{{ item.date }}</div>
              <van-divider customStyle="margin: 0.25rem 0;"/>
              <div class="flex-j-sb f-14 m-t-6 " >
                <div class="f-bold" style="display: flex;">
                  {{ item.type_name }}：<div class="themeColor">{{ item.change }}</div>
                </div>
                <div class="small-tag color-6E6E79">可用：{{ item.unused }}</div>
              </div>
            </div>
          </d-list>
        </div>
      </van-tab>

      <van-tab title="权益有效期">
        <div class="list t-l" >
          <d-list :loading="(dataList[1] && dataList[1].list.length) > 0 ? dataList[this.activeName].isLoadMore : false" :finished="(dataList[1] && dataList[1].list.length > 0) ? dataList[this.activeName].isLoadMore : false" @load="onLoad" >
            <div class="navlist-radius-block" v-for="(item, index) in dataList[1].list" :key="index">
              <div class="f-bold f-15">{{ item.title }}</div>
              <div class="f-13">{{ item.created_at }}</div>
              <van-divider customStyle="margin: 0.25rem 0;"/>
              <div class="flex-j-sb f-14 m-t-6 f-bold" v-for="item in item.content">
                <div class="flex">
                  {{ item.title }}：<div class="themeColor">{{ item.value }}</div>
                </div>
              </div>
              <div class="flex-j-sb f-14 m-t-6">
                <div class="f-bold flex">
                  有效期至：<div class="themeColor">{{ item.expire_time }}</div>
                </div>
              </div>
            </div>
          </d-list>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import DList from "@/components/dlist";
export default {
  data() {
    return {
      storage_space: {
        used: 0,
        total: 0
      },
      body_clone: {
        used: 0,
        total: 0
      },
      audio_clone: {
        used: 0,
        total: 0
      },
      video_clone: {
        used: 0,
        total: 0
      },
      video_duration: {
        used: 0,
        total: 0
      },
      paperwork: {
        used: 0,
        total: 0
      },


      activeName: 0,
      dataList: [],
      titleArr: [],
    };
  },

  created() {
    this.getData();
    this.init();
  },
  components: {DList},

  computed: {},

  mounted() {},

  methods: {
    onLoad() {
      this._getMoreData();
    },
    async getData() {
      let { result, msg, data } = await $http.get("plugin.ai-create.frontend.controllers.member.record.index", {}, ".");
      if (result == 0) return this.$toast(msg);
      this.member_statistics = data
      // Object.assign(this, data);
    },
    init() {
      let titleArr = [
        {
          name: "权益明细",
          url: "plugin.ai-create.frontend.controllers.member.record.get-list"
        },
        {
          name: "权益有效期",
          url: "plugin.ai-create.frontend.controllers.member.interests"
        }
      ];
      this.isLoadMore = true;
      this.titleArr = titleArr;
      this.setNewArr();
    },
    setNewArr() {
      let _dataList = [];
      this.titleArr.forEach((val, index) => {
        _dataList.push({
          url: val.url,
          isLoadMore: false,
          loading: false,
          finished: false,
          page: 1,
          total_page: 0,
          list: []
        });
      });
      this.dataList = _dataList;
      this.handleClick();
    },
    async handleClick() {
      let { result, msg, data } = await $http.get(this.dataList[this.activeName].url, {}, ".");
      if (result == 0) return this.$toast(msg);
      this.dataList[this.activeName].list = data.data;
      this.dataList[this.activeName].isLoadMore = false;
      this.dataList[this.activeName].page = 1;
      this.dataList[this.activeName].total_page = data.last_page;
      if (this.dataList[this.activeName].page >= this.dataList[this.activeName].total_page) {
        this.dataList[this.activeName].isLoadMore = true;
      }
    },
    async _getMoreData() {
      this.dataList[this.activeName].isLoadMore = false;
      if (this.dataList[this.activeName].page >= this.dataList[this.activeName].total_page) {
        this.dataList[this.activeName].isLoadMore = true;
        return;
      } else {
        this.dataList[this.activeName].page = this.dataList[this.activeName].page + 1;
        let { result, msg, data } = await $http.get(this.dataList[this.activeName].url, { page: this.dataList[this.activeName].page }, ".");
        if (result == 0){
          this.dataList[this.activeName].isLoadMore = false;
          this.dataList[this.activeName].page = this.dataList[this.activeName].page - 1;
          return this.$toast(msg);
        }

        this.dataList[this.activeName].list = this.dataList[this.activeName].list.concat(data.data);
        this.dataList[this.activeName].isLoadMore = false;
      }
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.color-6E6E79 {
  color: #6e6e79;
}
.number_List {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin: 0.625rem 0.75rem 0rem;
  background: #ffffff;
  border-radius: 0.625rem;
  flex-wrap: wrap;
}
.number_List .lis {
  margin: 0.625rem 0;
  box-sizing: border-box;
  width: 24.5%;
  text-align: center;
}
.number_List .lis .top {
  font-size: 0.85rem;
  color: #00001c;
  font-weight: bold;
}
.number_List .lis .txt {
  color: #6e6e79;
  font-size: 0.75rem;
}
.tabs-custom-class {
  background-color: #f5f5f5;
}

.tabs-custom-class .van-tabs__line {
  bottom: 6px !important;
  width: 20px !important;
}
.navlist-radius-block {
  margin: 0.75rem 0.75rem 0;
  border-radius: 0.75rem;
  padding: 0.75rem;
  background: #ffffff;
}
.small-tag {
  padding: 0 5px;
  line-height: 1.125rem;
  height: 1.125rem;
  background: #f0f0f1;
  border-radius: 4px 4px 4px 4px;
  font-size: 13px;
}
.flex-j-sb {
  margin-bottom: 0.5rem;
}
</style>
